<template>
  <el-card class="my-card" shadow="never" style="min-height: calc(100vh - 70px)">
  <div class="plans-wrap">
    <div class="plans-left">
      <!--<div class="plans-left-title">-->
      <!--  <el-button type="warning">重置</el-button>-->
      <!--  <el-button type="primary">创建拟调方案1</el-button>-->
      <!--</div>-->
      <div class="plans-left-content">
        <el-table
          :data="tableData"
          :show-header="false"
          :row-class-name="tableRowClassName"
          @cell-click="headerChange"
        >
          <el-table-column prop="orgName">
            <template scope="scope"
              ><span class="orgNameCss">{{ scope.row.orgName }}</span></template
            >
          </el-table-column>
          <el-table-column prop="prepareTotal"> </el-table-column>
          <el-table-column prop="actualNum"> </el-table-column>
          <el-table-column prop="overTotal"> </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
  </el-card>
</template>

<script>
import { getOrgDetail } from "@/api/orgadjust/index.js";
export default {
  name: "Orgadjust",
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    /**
     * 表格 类名
     */
    tableRowClassName({ row, rowIndex }) {
      if (row.remark) {
        return "remark-row";
      }
    },

    /**
     * 左侧表格点击跳转
     */
    headerChange(row, column, cell, event) {
      if (column.property == "orgName" && row.orgId) {
        this.$router.push({
          path: "/plan/planChange",
          query: { orgId: row.orgId, orgName: row.orgName },
        });
      }
    },
    getOrgDetail() {
      localStorage.removeItem("tempId");
      localStorage.removeItem("version");
      getOrgDetail({ orgId: localStorage.getItem("orgId") }).then(
        (response) => {
          if (response.code == 200) {
            this.tableData = [];
            //   name: '目前状态',
            // total: '编制总数:250',
            // real: '实际人数:263',
            // exceed: '超编总数:13'
            let item = {};
            item.orgName = "目前状态";
            item.actualNum = "实际人数:" + response.data.actualNum;
            item.prepareTotal = "编制总数:" + response.data.prepareTotal;
            item.overTotal = "超空编数:" + response.data.overTotal;
            item.remark = true;
            this.tableData.push(item);
            //内设机构
            if (
              response.data.internalList &&
              response.data.internalList.typeDetail.length > 0
            ) {
              let item1 = {};
              let internalData = response.data.internalList;
              item1.orgName = "内设机构";
              item1.actualNum = "实际人数:" + internalData.actualNum;
              item1.prepareTotal = "编制总数:" + internalData.prepareTotal;
              item1.overTotal = "超空编数:" + internalData.overTotal;
              item1.remark = true;
              this.tableData.push(item1);
              this.tableData.push.apply(
                this.tableData,
                internalData.typeDetail
              );
            }
            //下设机构
            if (
              response.data.consistsList &&
              response.data.consistsList.typeDetail.length > 0
            ) {
              let item1 = {};
              let infoData = response.data.consistsList;
              item1.orgName = "下设机构";
              item1.actualNum = "实际人数:" + infoData.actualNum;
              item1.prepareTotal = "编制总数:" + infoData.prepareTotal;
              item1.overTotal = "超空编数:" + infoData.overTotal;
              item1.remark = true;
              this.tableData.push(item1);
              this.tableData.push.apply(this.tableData, infoData.typeDetail);
            }
            //派出机构
            if (
              response.data.sendList &&
              response.data.sendList.typeDetail.length > 0
            ) {
              let item1 = {};
              let infoData = response.data.sendList;
              item1.orgName = "派出机构";
              item1.actualNum = "实际人数:" + infoData.actualNum;
              item1.prepareTotal = "编制总数:" + infoData.prepareTotal;
              item1.overTotal = "超空编数:" + infoData.overTotal;
              item1.remark = true;
              this.tableData.push(item1);
              this.tableData.push.apply(this.tableData, infoData.typeDetail);
            }
            //事业机构
            if (
              response.data.careerList &&
              response.data.careerList.typeDetail.length > 0
            ) {
              let item1 = {};
              let infoData = response.data.careerList;
              item1.orgName = "事业机构";
              item1.actualNum = "实际人数:" + infoData.actualNum;
              item1.prepareTotal = "编制总数:" + infoData.prepareTotal;
              item1.overTotal = "超空编数:" + infoData.overTotal;
              item1.remark = true;
              this.tableData.push(item1);
              this.tableData.push.apply(this.tableData, infoData.typeDetail);
            }
          }
        }
      );
    },
  },
  created() {
    this.getOrgDetail();
  },
};
</script>
<style lang="scss" scoped>
.plans-wrap {
  .plans-left {
    width: 60%;
    margin: 0 auto;
    min-width: 600px;

    .plans-left-title {
      margin-top: 10px;
      height: 40px;
    }

    .plans-left-content {
      margin-top: 10px;

      &::v-deep .el-table {
        // height: calc(100vh - 120px);
        overflow: auto;
        border: 1px solid #d9d9d9;

        td:first-child {
          background-color: #e1edfb;
        }

        .remark-row td {
          background: #c5ddf9;
        }

        .remark-row td:first-child {
          background: #aed0f5;
        }

        .remark-row .orgNameCss:hover {
          color: #606266;
          font-weight: normal;
        }
      }

      /*滚动条样式*/
      ::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 8px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 12px;
      }

      ::-moz-scrollbar {
        /*滚动条整体样式*/
        width: 8px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 12px;
      }

      ::-ms-scrollbar {
        /*滚动条整体样式*/
        width: 8px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 12px;
      }

      ::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 60px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.06);
        background: #8bb9eb;
      }

      ::-moz-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 60px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.06);
        background: #8bb9eb;
      }

      ::-ms-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 100px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.06);
        background: #8bb9eb;
      }

      ::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
        border-radius: 0;
        background: rgba(0, 0, 0, 0);
      }

      ::-moz-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
        border-radius: 0;
        background: rgba(0, 0, 0, 0);
      }

      ::-ms-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
        border-radius: 0;
        background: rgba(0, 0, 0, 0);
      }
    }
  }
}
</style>

<style>
.orgNameCss:hover {
  font-weight: bold;
}
</style>
